<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" class="form-content">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="封　　面">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="{ Authorization: token }"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="歌曲名称">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="歌　手">
            <el-input v-model="form.artist"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="歌　　曲">
            <el-upload
              class="upload-music"
              :action="uploadUrl"
              :on-remove="handleRemove"
              :on-success="handleMusicSuccess"
              multiple
              :limit="1"
              :file-list="musicList"
              :before-upload="beforeMusicUpload"
              :headers="{ Authorization: token }"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传mp3文件</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="歌　　词">
            <el-input type="textarea" v-model="form.lrc" autosize />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20"> </el-row>　 -->
      <el-form-item>
        <el-button type="primary" @click="toUpdate">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { mapGetters } from "vuex";
import { get, toUpdate } from "@/api/music";
export default {
  components: {
    Tinymce,
  },
  props: {
    activeId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      // 表单对象
      form: {},
      // 封面地址
      imageUrl: "",
      // 文件上传地址
      uploadUrl: process.env.VUE_APP_UPLOAD_URL,
      // 音乐列表
      musicList: [],
    };
  },
  computed: {
    ...mapGetters(["token"]),
  },
  watch: {
    // 当id改变时，加载数据
    activeId: {
      // 饥饿监听  第一次赋值也需要调用该方法
      immediate: true,
      handler: function () {
        this.handleRemove();
        this.getById();
      },
    },
  },
  methods: {
    getById() {
      get(this.activeId).then((res) => {
        console.log(res);
        this.form = res.data;
        this.imageUrl = this.form.cover;
        this.musicList.push({
          uid: res.data.url,
          name: res.data.fileName,
          url: res.data.url,
        });
      });
    },
    // 更新
    toUpdate() {
      this.form.cover = this.imageUrl;
      this.form.url = this.musicList[0].url;
      console.log(this.form);
      toUpdate(this.form).then((res) => {
        this.$message.success(res.msg);
        this.$emit("after");
        this.$emit("closeDialog");
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    //  限制用户上传的图片格式和大小
    beforeAvatarUpload(file) {
      const isPng = file.type === "image/png";
      const isJPG = file.type === "image/jpeg";
      const isBpm = file.type === "image/bmp";

      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!(isJPG || isPng || isBpm)) {
        this.$message.error("上传的歌曲封面只能是 JPG/Png/Bpm 格式!");
      }

      if (!isLt10M) {
        this.$message.error("上传封面图片大小不能超过 10MB!");
      }
      if (isPng) {
        return isPng && isLt10M;
      } else if (isJPG) {
        return isJPG && isLt10M;
      } else if (isBpm) {
        return isBpm && isLt10M;
      }
    },
    // 回显图片地址
    handleAvatarSuccess(res) {
      this.imageUrl = res.data.path;
    },
    //  限制用户上传的音乐格式
    beforeMusicUpload(file) {
      const isMPEG = file.type === "audio/mpeg";
      const isMP3 = file.type === "audio/mp3";

      if (!(isMPEG || isMP3)) {
        this.handleRemove();
        this.$message.error("上传的音乐文件只能是 mpeg/mp3 格式!");
      }
    },
    // 回显音乐地址
    handleMusicSuccess(res) {
      this.musicList.push({
        uid: res.data.path,
        name: res.data.fileName,
        url: res.data.path,
      });
    },
    // 移除音乐
    handleRemove() {
      this.musicList = [];
    },
  },
};
</script>

<style>
</style>